Collapsible Widget

Collapsible content

To create a collapsible block of content, create a container and add the data-role="collapsible" attribute. Using the data-content-theme attribute allows you to set a theme for the content of the collapsible.

Directly inside this container, add any header (H1-H6) or legend element. The framework will style the header to look like a clickable button and add a "+" icon to the left to indicate it's expandable.

After the header, add any HTML markup you want to be collapsible. The framework will wrap this markup in a container that will be hidden/shown when the heading is clicked.

By default, the content will be collapsed.

<div data-role="collapsible">
  <h3>I'm a header</h3>
  <p>I'm the collapsible content. By default I'm closed, but you can click the header to open me.</p>
</div>

This code will create a collapsible widget like this:

Initially expanded collapsibles

When you add the data-collapsed="false" attribute to the wrapper the collapsible will initially be expanded.

<div data-role="collapsible" data-collapsed="false">

This code will create a collapsible widget like this:

Non-inset collapsibles

By default collapsibles have an inset appearance. To make them full width without corner styling add the data-inset="false" attribute to the element.

<div data-role="collapsible" data-inset="false">

This code will create a non-inset collapsible:

Mini collapsibles

For a more compact version that is useful in toolbars and tight spaces, add the data-mini="true" attribute to the element to create a mini version.

<div data-role="collapsible" data-mini="true">

This code will create a mini collapsible widget:

Custom icons

The default icon of collapsible headings can be overridden by using the data-collapsed-icon and data-expanded-icon attributes. The example below uses data-collapsed-icon="arrow-r" and data-expanded-icon="arrow-d".

Icon positioning

The default icon positioning of collapsible headings can be overridden by using the data-iconpos attribute. The example below uses data-iconpos="right".

Theming collapsible content

Collapsible content is minimally styled - we add only a bit of margin between the bar and content, and the header adopts the default theme styles of the container within which it sits.

To provide a stronger visual connection between the collapsible header and content, add the data-content-theme attribute to the wrapper and specify a theme swatch letter. This applies the border and background color of the swatch to the content block and changes the corner rounding to square off the bottom of the header and round the bottom of the content block instead to visually group these elements.

<div data-role="collapsible" data-content-theme="b">
  <h3>Header</h3>
  <p>I'm the collapsible content with a themed content block set to "b".</p>
</div>

Theming collapsible headers

To set the theme on a collapsible header button, add the data-theme attribute to the wrapper and specify a swatch letter. Note that you can mix and match swatch letters between the header and content with these theme attributes.

<div data-role="collapsible" data-theme="b" data-content-theme="b">
  <h3>Header swatch B</h3>
  <p>I'm the collapsible content with a themed content block set to "b".</p>
</div>

Nested Collapsibles

Collapsibles can be nested inside each other if needed. In this example, we're setting the content theme to provide clearer visual connection between the levels.

Collapsible sets (accordions)

It's possible to combine multiple collapsibles into a grouped set that acts like an accordion widget.

The collapsible widget creates an anchor from the heading element and wraps the rest of the children of the outermost widget in a div that will serve as the container for the collapsible content.

In the example below, pre-rendered markup for a collapsible is provided. The attribute data-collapsed-icon="arrow-r" is explicitly specified, since the use of theui-icon-arrow-r class on the anchor element indicates that the value of the "collapsedIcon" widget option is to be "arrow-r".

<div data-role="collapsible" data-enhanced="true" class="ui-collapsible ui-collapsible-inset ui-corner-all ui-collapsible-collapsed" data-collapsed-icon="arrow-r">
  <h2 class="ui-collapsible-heading ui-collapsible-heading-collapsed">
    <a href="#" class="ui-collapsible-heading-toggle ui-btn ui-btn-icon-left ui-icon-arrow-r">
      Pre-rendered collapsible
      <span class="ui-collapsible-heading-status"> click to expand contents</span>
    </a>
  </h2>
  <div class="ui-collapsible-content ui-collapsible-content-collapsed" aria-hidden="true">
    <p>This is the collapsible-content</p>
  </div>
</div>